<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Customers List</title>
    </head>
    <body>
        <div id="rightsgrid" style="height:280px;" class="x-form-item">
            权限列表：
        </div>
        <script>
            //package("trailblazer.user");
            //package("feyaSoft.demouser");
            //Ext.namespace("trailblazer.user");
            /*
             * Ext JS Library 2.1
             * Copyright(c) 2006-2008, Ext JS, LLC.
             * licensing@extjs.com
             *
             * http://extjs.com/license
             */
            //为了一般JS方法可以调用，这个变量定义要放在onReady外面．
            var rightDS;
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                // fix the bug in codepress - resize
                //Ext.BoxComponent.prototype.setSize('100%', '125px');
                
                /************************************************************
                 * Display the result in page
                 * the column model has information about grid columns
                 * dataIndex maps the column to the specific data field in
                 * the data store (created below)
                 ************************************************************/
                var rightCM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                    id: 'id',
                    header: "Identify",
                    dataIndex: 'id',
                    width: 150,
                    hidden: true
                }, {
                    header: "ControllerName",
                    width: 100,
                    dataIndex: 'controller_name'
                }, {
                    header: "ActionName",
                    width: 100,
                    dataIndex: 'action_name'
                }, {
                    header: "描述",
                    width: 100,
                    dataIndex: 'description'
                }]);
                
                /************************************************************
                 * connect to backend - grid - core part
                 * create the Data Store
                 *   connect with backend and list the result in page
                 *   through JSON format
                 ************************************************************/
                rightDS = new Ext.data.Store({
                    // load using script tags for cross domain, if the data in on the same domain as
                    // this page, an HttpProxy would be better
                    proxy: new Ext.data.HttpProxy({
                        url: '/rights/getRights'
                    }),
                    
                    // create reader that reads the Topic records
                    reader: new Ext.data.JsonReader({
                        root: 'root',
                        totalProperty: 'totalProperty',
                        id: 'id'
                    }, [{
                        name: 'id'
                    }, {
                        name: 'controller_name'
                    }, {
                        name: 'action_name'
                    }, {
                        name: 'description'
                    }])
                });
                
                
                /************************************************************
                 * add a paging toolbar to the grid's footer
                 ************************************************************/
                var myPagingToolbar = new Ext.PagingToolbar({
                    pageSize: 10,
                    displayInfo: true,
                    displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                    emptyMsg: "没有记录",
                    store: rightDS
                });
                
                /************************************************************
                 * Define menubar now in here
                 *   add and delete functions
                 ************************************************************/
                var menubar = [{
                    text: '增加权限内容',
                    tooltip: 'Add a new right',
                    iconCls: 'addItem',
                    handler: function(){
                        Createright(rightDS);
                    }
                }, '-', {
                    text: '删除权限内容',
                    tooltip: 'Remove the selected items',
                    iconCls: 'remove',
                    handler: function(){
                        // delete right now - action
                        Deleteright(rightDS, rightGridPanel);
                    }
                }];
                /************************************************************
                 * define grid panel now
                 ************************************************************/
                var rightGridPanel = new Ext.grid.GridPanel({
                    border: false,
                    el: 'rightsgrid',
                    ds: rightDS,
                    cm: rightCM,
                    //                    viewConfig: {
                    //                        forceFit: true
                    //                    },
                    loadMask: true,
                    tbar: menubar,
                    bbar: myPagingToolbar
                });
                
                //panel render
                rightGridPanel.render();
                // trigger the data store load
                rightDS.load({
                    params: {
                        start: 0,
                        limit: 10
                    }
                });
                
                /************************************************************
                 * Action - edit
                 *   handle double click
                 *   user select one of the item and want to update it
                 ************************************************************/
                rightGridPanel.on('rowdblclick', function(rightGridPanel, rowIndex, e){
                    var selectedId = rightDS.data.items[rowIndex].id;
                    EditRight(rightDS, selectedId);
                });
                function onItemCheck(item, checked){
                    Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
                }
            });
            
        </script>
    </body>
</html>
